<!DOCTYPE html>
	<head>
		<meta charset="utf-8">

		<title>İzmir Yüksek Teknoloji Enstitüsü PRT/İstasyon Web Yönetim Paneli</title>

		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/bootstrap-responsive.css">
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
		<link rel="stylesheet" href="css/main.css">

		<script type="text/javascript" src="js/config.js"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
		<script type="text/javascript" src="js/bootstrap-tooltip.js"></script>
        <script type="text/javascript" src="js/bootstrap-popover.js"></script>
        <script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
        <script type="text/javascript" src="js/animation.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>
        <script type="text/javascript" src="http://media2.juggledesign.com/qtip2/js/jquery.flot.min.js"></script>
		<script type="text/javascript" src="js/station.js"></script>
		<script type="text/javascript" src="js/prt.js"></script>
		<script type="text/javascript" src="js/graph.js"></script>
	</head>

	<body>
		<div id="container" class="container-fluid">
			<div id="header" class="row-fluid">
				<div class="span12">
					<h1>İzmir Yüksek Teknoloji Enstitüsü PRT/İstasyon Web Yönetim Paneli</h1>
				</div>
			</div>
			<div id="content" class="row-fluid">
				<div id="prt" class="span2">
					<div class="row-fluid">
						<div class="myBox">
							<div class="myBoxHeader"><strong>PRT</strong></div>
							<div class="myBoxContent">
								<select id = "prt_selectedVehicle" name="prt_selectedVehicle" class="span12" onchange="prt_getInformation();">
			                        <option value="">Bir araç seçiniz.</option>
           						</select>
							</div>
						</div>
						<div class="myBox">
							<div class="myBoxHeader"><strong>Araç Bilgileri</strong></div>
							<div class="myBoxContent">
								<table>
									<tr>
										<td><strong>Durum&nbsp;</strong></td>
										<td><div id="prt_info_state"></div></td>
									</tr>
									<tr style="border-top: 1px solid #999999;">
										<td><strong>Boş Koltuk Sayısı&nbsp;</strong></td>
										<td><div id="prt_info_freeSeats"></div></td>
									</tr>
									<tr style="border-top: 1px solid #999999;">
										<td><strong>Pil&nbsp;</strong></td>
										<td><div id="prt_info_battery"></div></td>
									</tr>
									<tr style="border-top: 1px solid #999999;">
										<td><strong>Gittiği Toplam Mesafe&nbsp;</strong></td>
										<td><div id="prt_info_totalDistance"></div></td>
									</tr>
									<tr style="border-top: 1px solid #999999;">
										<td><strong>Konum&nbsp;</strong></td>
										<td><div id="prt_info_location"></div></td>
									</tr>
									<tr style="border-top: 1px solid #999999;">
										<td><strong>Gideceği Yer&nbsp;</strong></td>
										<td><div id="prt_info_destination"></div></td>
									</tr>
									<tr style="border-top: 1px solid #999999;">
										<td><strong>Hız&nbsp;</strong></td>
										<td><div id="prt_info_speed"></div></td>
									</tr>
								</table>
							</div>
						</div>
						<div class="myBox">
							<div class="myBoxHeader"><strong>Komutlar</strong></div>
							<div class="myBoxContent">
								<div style="text-align:center"> 
				                	<a class="btn btn-block" onclick="prt_start();" style="font-size: 10pt;" href="#">Başlat</a>
				                	<a class="btn btn-block" onclick="prt_stop();" style="font-size: 10pt;" href="#">Durdur</a>
				                	<a class="btn btn-block" onclick="prt_charge();" style="font-size: 10pt;" href="#">Şarja Gönder</a>
				                	<img class="loading_img" src="img/loader.gif" id="loader_prtCommand" alt="Loading..." />
				           		</div>
							</div>
						</div>
						<div class="myBox">
							<div class="myBoxHeader"><strong>Sensörler</strong></div>
							<div class="myBoxContent">
								<table>
									<tr>
										<td><strong>Sensör 1&nbsp;&nbsp;</strong></td>
										<td><div id="prt_sensors_1">Çalışıyor</div></td>
									</tr>
									<tr style="border-top: 1px solid #999999;">
										<td><strong>Sensör 2&nbsp;&nbsp;</strong></td>
										<td><div id="prt_sensors_2">Çalışmıyor</div></td>
									</tr>
									<tr style="border-top: 1px solid #999999;">
										<td><strong>Sensör 3&nbsp;&nbsp;</strong></td>
										<td><div id="prt_sensors_3">Çalışıyor</div></td>
									</tr>
									<tr style="border-top: 1px solid #999999;">
										<td><strong>Sensör 4&nbsp;&nbsp;</strong></td>
										<td><div id="prt_sensors_4">Çalışıyor</div></td>
									</tr>
									<tr style="border-top: 1px solid #999999;">
										<td><strong>Sensör 5&nbsp;&nbsp;</strong></td>
										<td><div id="prt_sensors_5">Çalışmıyor</div></td>
									</tr>
								</table>
							</div>
						</div>
					</div>
				</div>
				<div id="animation" class="span8">
					<div class="row-fluid">
						<div class="row-fluid">
							<div class="myBox span12">
								<div class="myBoxHeader"><strong>Animasyon</strong></div>
								<div class="myBoxContent">
									<div class="span1"></div>
									<div class="span10" id="animation_container" style=" background-image: url(img/ani_road.png); background-repeat: no-repeat; background-position: 63px 63px;"></div>
									<div class="span1"></div>
								</div>
							</div>
						</div>
						<div class="row-fluid">
							<div class="myBox span6">
								<div class="myBoxHeader"><strong>PRT İstatistikleri</strong></div>
								<div class="myBoxContent">
									<select id = "prt_selectedGraph" name="prt_selectedGraph" class="span12" onchange="prt_plot();">
										<option value="">Bir grafik seçiniz.</option>
										<option value="freeSeats">Boş Koltuk</option>
										<option value="battery">Pil</option>
										<option value="distanceTravelled">Gittiği Toplam Mesafe</option>
										<option value="speed">Hız</option>
									</select>
									<div id="prt_stats" style="width: 360px; height: 240px;"></div>
								</div>
							</div>
							<div class="myBox span6">
								<div class="myBoxHeader"><strong>İstasyon İstatistikleri</strong></div>
								<div class="myBoxContent">
									<select class="span12" id="station_selectedGraph" onchange="station_plot();" >
	      								<option value="">Bir grafik seçiniz.</option>
	      								<option value="numberOfPassenger">Yolcu Sayısı/Zaman</option>
	    							</select>
	     							<div id="station_stats" style="width: 360px; height: 240px;"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id="station" class="span2">
					<div class="row-fluid">
						<div class="myBox">
							<div class="myBoxHeader"><strong>İstasyon</strong></div>
							<div class="myBoxContent">
								<select name="station_selectedStation" id="station_selectedStation" class="span12" onchange="station_getStation(this);">
									<option value="">Bir istasyon seçiniz.</option>
								</select>
							</div>
						</div>
						<div class="myBox">
							<div class="myBoxHeader"><strong>Yolcu Bilgileri</strong></div>
							<div class="myBoxContent">
								<div id="station_noOfPassengers"></div>
								<div id="station_passengerIcons"></div>
								<div id="station_infoOfPassengers"></div>
			                    <div id="station_distType"></div>
			                    <div id="station_distParams"></div>
			                    <div style="text-align:center"> 
			                        <img class="loading_img" src="img/loader.gif" id="loader_selectStation" alt="Loading..." />
			                    </div>
							</div>
						</div>
						<div class="myBox">
							<div class="myBoxHeader"><strong>Yolcu Ekle</strong></div>
							<div class="myBoxContent">
								<input id="station_passengerNumberToAdd" class="span12" type="number" min="1">
      							<button class="btn btn-block" type="button" onclick="station_addPassenger();">Ekle</button>
    							<div style="text-align:center"> 
    								<img class="loading_img" src="img/loader.gif" id="loader_addPassenger" alt="Loading..."/>
    							</div>
							</div>
						</div>
						<div class="myBox">
							<div class="myBoxHeader"><strong>Konfigürasyon</strong></div>
							<div class="myBoxContent">
								<select name="station_selectedDistribution" class="span12"  id="station_selectedDistribution" onchange="station_getDistributions(this);" >
					            	<option value="">Bir dağılım türü seçiniz.</option>
					            	<option value="1">Uniform</option>
					            	<option value="2">Normal</option>
					            	<option value="3">Üstel</option>
					            	<option value="4" >Geometrik</option>
								</select>
								<div id="station_parameters"></div>
	 							<div style="text-align:center"> 
									<img class="loading_img" src="img/loader.gif" id="loader_getDistributions" alt="Loading..."/>
								</div>
								<button class="btn btn-block " type="button" onclick="station_config();">Gönder</button>
								<div style="text-align:center"> 
									<img class="loading_img" src="img/loader.gif" id="loader_stationConfig" alt="Loading..."/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="footer" class="row-fluid">
				<div class="span12">
					<h6>&copy; 2013 İzmir Yüksek Teknoloji Enstitüsü | Her hakkı saklıdır. | <a href="http://www.iyte.edu.tr">http://www.iyte.edu.tr</a></h6>
				</div>
			</div>
		</div>
		<script>
			ws = new WebSocket('ws://' + HOST_URL + ':8887'); //10.8.44.123:8887
			ws.onopen = function()
			{
				console.log("[WebSocket#onopen]\n");
			}
			ws.onmessage = function(e)
			{
				console.log("[WebSocket#onmessage] Message: '" + e.data + "'\n");var obj = JSON.parse(e.data);
				console.log(">n:" + obj.name);
				console.log(">d:" + obj.data.type);
				ani_updatePos(obj.data);
			}
			ws.onclose = function()
			{
				console.log("[WebSocket#onclose]\n");
				ws = null;
			}
		</script>
	</body>
</html>